<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>公司电子签章</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        input[type="button"] {
            padding: 10px 20px;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="button"]:hover {
            opacity: 0.8;
        }

        #generate-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        #cancel-button {
            background-color: #ccc;
        }

        #sealdiv,
        #tuzhangdiv {
            text-align: center;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            border-radius: 5px;
            text-align: center;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>输入框不能为空，请输入相关信息。</p>
        </div>
    </div>
    <div class="input-container">
        <input id="dw" type="text" placeholder="请输入公司名称" />
        <input id="mdtext" type="text" placeholder="请输入章用途" />
        <input type="button" id="generate-button" onclick="createSealEx2();" value="生成" />
        <input type="button" id="cancel-button" onclick="resetForm()" value="取消" />
    </div>
    <div id="tuzhangdiv">
        <canvas id="generatedCanvas" width="160" height="160"></canvas>
    </div>
    <script>
        var modal = document.getElementById("myModal");
        var span = document.getElementsByClassName("close")[0];

        span.onclick = function () {
            modal.style.display = "none";
        }

        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        function createSealEx2() {
            var dw = document.getElementById("dw");
            var mdtext = document.getElementById("mdtext");
            if (dw.value === "" || mdtext.value === "") {
                modal.style.display = "block";
                return;
            }
            var generatedCanvas = document.getElementById("generatedCanvas");
            var ctx = generatedCanvas.getContext('2d');
            ctx.clearRect(0, 0, generatedCanvas.width, generatedCanvas.height);
            createSeal11('generatedCanvas', dw.value, mdtext.value);
        }

        function createSeal11(id, company, name) {
            var canvas = document.getElementById(id);
            var context = canvas.getContext('2d');

            var width = canvas.width / 2;
            var height = canvas.height / 2;
            context.lineWidth = 2;
            context.strokeStyle = "#f00";
            context.beginPath();
            context.arc(width, height, 78, 0, Math.PI * 2);
            context.stroke();
            context.save();

            context.lineWidth = 1;
            context.strokeStyle = "#f00";
            context.beginPath();
            context.arc(width, height, 75, 0, Math.PI * 2);
            context.stroke();
            context.save();

            create5star(context, width, height, 25, "#f00", 0);

            context.font = '14px Helvetica';
            context.textBaseline = 'middle';
            context.textAlign = 'center';
            context.lineWidth = 1;
            context.fillStyle = '#f00';
            context.fillText(name, width, height + 53);

            context.translate(width, height);
            context.font = '20px Helvetica'
            var count = company.length;
            var angle = 4 * Math.PI / (3 * (count - 1));
            var chars = company.split("");
            var c;
            for (var i = 0; i < count; i++) {
                c = chars[i];
                if (i == 0)
                    context.rotate(5 * Math.PI / 6);
                else
                    context.rotate(angle);
                context.save();
                context.translate(64, 0);
                context.rotate(Math.PI / 2);
                context.fillText(c, 0, 5);
                context.restore();
            }
        }

        function create5star(context, sx, sy, radius, color, rotato) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy);
            context.rotate(Math.PI + rotato);
            context.beginPath();
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(x * radius, y * radius);
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.restore();
        }

        function resetForm() {
            var nHtm = '<canvas id="generatedCanvas" width="160" height="160"></canvas>';
            document.getElementById("tuzhangdiv").innerHTML = nHtm;
        }
    </script>
</body>

</html>
    